angular.module('app').config(($stateProvider) => {

    $stateProvider.state('app.gestures-and-events', {
        url         : '/gestures-and-events',
        label       : 'Gestures-and-Events',
        controller  : 'app.gestures-and-events',
        controllerAs: '$ctrl',
        templateUrl : 'view/app/gestures-and-events/gestures-and-events.html'
    });
}).controller('app.gestures-and-events', function ($ionicGesture) {
    var ctrl = this, gesture, $btn = angular.element(document.getElementById('gestureBtn'));
    ctrl.gestureControl = false;
    // 长按的时间是500毫秒.
    ctrl.onHold = function () {
        console.log('on-hold');
    };
    // 轻击事件, 如果长按时间超过250毫秒, 那就不是轻击了.
    ctrl.onTap = function () {
        console.log('on-tap');
    };
    // 双击.
    ctrl.onDoubleTap = function () {
        console.log('on-double-tap');
    };
    // 这个和 on-tap 还是有区别的, 这个是立即执行，而且是用户点击立马执行. 不用等待 touchend/mouseup.
    ctrl.onTouch = function () {
        console.log('on-touch');
    };
    // 当用户结束触摸事件时触发.
    ctrl.onRelease = function () {
        console.log('on-release');
    };
    // 这个有点类似于PC端的拖拽. 当你一直点击某个物体, 并且手开始移动, 都会触发 on-drag.
    ctrl.onDrag = function () {
        console.log('on-drag');
    };
    // 向上拖拽.
    ctrl.onDragUp = function () {
        console.log('on-drag-up');
    };
    // 向右拖拽.
    ctrl.onDragRight = function () {
        console.log('on-drag-right');
    };
    // 向下拖拽.
    ctrl.onDragDown = function () {
        console.log('on-drag-down');
    };
    // 向左拖拽.
    ctrl.onDragLeft = function () {
        console.log('on-drag-left');
    };
    // 指手指滑动效果, 可以是任何方向上的. 而且也和 on-drag 类似, 都有四个方向上单独的事件.
    ctrl.onSwipe = function () {
        console.log('on-swipe');
    };
    // 向上的手指滑动效果.
    ctrl.onSwipeUp = function () {
        console.log('on-swipe-up');
    };
    // 向右的手指滑动效果.
    ctrl.onSwipeRight = function () {
        console.log('on-swipe-right');
    };
    // 向下的手指滑动效果.
    ctrl.onSwipeDown = function () {
        console.log('on-swipe-down');
    };
    // 向左的手指滑动效果.
    ctrl.onSwipeLeft = function () {
        console.log('on-swipe-left');
    };
    ctrl.gestureControlChange = function () {
        ctrl.gestureControl ? addGestureEvent() : offGestureEvent();
    };

    function addGestureEvent() {
        // 在 element 上添加一个 gesture 事件
        gesture = $ionicGesture.on('tap', callback, $btn);
    }

    function offGestureEvent() {
        // 在一个 gesture 上移除一个事件监听器.
        $ionicGesture.off(gesture, 'tap', callback);
    }

    function callback(e) {
        console.log(`on ${e.type} console from [$ionicGesture]`);
    }
});